<template>
   <div class="app-container" ref="main">

      <el-container>
         <el-header>
            <section class="search_box clearfix">
               <el-row>
                  <el-col :md="12" :lg="8" :xl="6">
                     <label class="search-label">城市：</label>
                     <el-input v-model="listQuery.cityName" @keyup.enter.native="search" size="mini"
                               class="search-input" placeholder="请输入"
                               clearable @change="search" />
                  </el-col>
                  <el-col :md="12" :lg="16" :xl="18" class="text_right">
                     <el-button type="primary" @click="routerBack" size="mini"
                                icon="el-icon-back" plain>返回
                     </el-button>
                     <el-button type="primary" icon="el-icon-search" @click="search" size="mini">搜索
                     </el-button>
                  </el-col>
               </el-row>
            </section>
         </el-header>

         <el-main>
            <el-table :data="list" border fit highlight-current-row
                      :max-height="listHeight">

               <el-table-column align="center" label="序号" prop="index" width="70">
               </el-table-column>

               <el-table-column align="center" label="城市" prop="cityName" min-width="100">
               </el-table-column>
            </el-table>
         </el-main>
         <el-footer>
            <!--翻页-->
            <div class="pagination-container">
               <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                              :current-page.sync="currentPage"
                              :page-size="listQuery.pageSize" :total="totalElements" :page-sizes="[10, 20, 50, 100]"
                              layout="total, sizes, prev, pager, next, jumper" background>
               </el-pagination>
            </div>
         </el-footer>
      </el-container>
   </div>
</template>

<script>
   import customerApi from "api/customer";

   export default {
      data() {
         return {
            listHeight: 0,  //动态列表高度
            totalElements: 0,   //总条数
            currentPage: 1,     //当前页
            list: null,       //列表

            //搜索
            listQuery: {
               page: 1,
               pageSize: 10,
               cityName: "",
               parentId: this.$route.query.keyId
            },
         };
      },

      methods: {
         routerBack() {
            this.$router.push({
               path: "cityIndex",
               query: {listQuery: this.$route.query.listQuery}
            });
         },

         //列表
         getList() {
            customerApi.cityPageList(this.listQuery).then(res => {
               this.list = res.data.content.map((d, i) => {
                  d.index = (this.currentPage - 1) * this.listQuery.pageSize + i + 1;
                  return d;
               });
               this.totalElements = res.data.totalElements;
            });
         },

         search() {
            this.listQuery.page = this.currentPage = 1;
            this.getList();
         },
         //控制列表显示条数
         handleSizeChange(val) {
            this.listQuery.page = 1;
            this.listQuery.pageSize = val;
            this.getList();
         },
         handleCurrentChange() {
            this.listQuery.page = this.currentPage;
            this.getList();
         },

      },

      mounted() {
         this.$nextTick(() => {
            this.listHeight = this.$refs.main.offsetHeight - 175;
            let self = this;
            window.addEventListener("resize", function () {
               self.listHeight = self.$refs.main.offsetHeight - 175;
            });
         });
      },

      created() {
         this.getList();
      },
   }
   ;
</script>